<template>
  <el-dialog
    v-model="dialogVisible"
    :title="$t('message.role.jurisdiction')"
    append-to-body
    @close="closeDialog"
    top="10vh"
    width="70%"
  >
    <!-- 查询和其他操作 -->
    <div>
      <div class="filter-container">
        <el-input
          v-model="keyword"
          clearable
          size="small"
          class="filter-item-left"
          style="width: 200px"
          :placeholder="$t('message.jurisdiction.placeholder')"
          @keyup.enter="getTableData"
        />
        <el-button
          class="filter-item-right"
          icon="el-icon-search"
          size="small"
          @click="getTableData"
          >{{ $t('message.operate.search') }}</el-button
        >

        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-refresh"
          size="small"
          @click="handleReset"
          >{{ $t('message.operate.reset') }}</el-button
        >
      </div>
      <div class="filter-container filter-container2">
        <el-button class="filter-item" type="primary" size="small" @click="handleConfirm">{{
          $t('message.operate.confirm')
        }}</el-button>
      </div>
    </div>

    <el-table
      ref="multipleTable"
      v-loading="loading"
      :height="600"
      :data="tableData"
      border
      :row-key="row => {return row.id}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
      <el-table-column :label="$t('message.jurisdiction.index')" width="60" align="center">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('message.jurisdiction.powerName')" align="center">
        <template #default="scope">
          <span>{{ scope.row.powerName }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('message.jurisdiction.powerDescribe')" align="center">
        <template #default="scope">
          <span>{{ scope.row.powerDescribe }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="pagination">
      <el-pagination
        v-model="pagination.currentPage"
        :page-size="pagination.size"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total"
        background
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>
<script>
import { getJurisdictionList, getPowers } from '@/views/system/api/roles'
import { get } from 'lodash'
export default {
  props: {
    dialogVisible: Boolean,
    id: String,
  },
  emits: ['update:dialogVisible'],
  data() {
    return {
      keyword: '',
      pagination: {
        current: 1,
        size: 15,
        total: 0,
      },
      tableData: [],
      loading: false,
      multipleSelection: [],
      Selectioned: [],
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    closeDialog() {
      this.$emit('update:dialogVisible', false)
    },
    getTableData() {
      this.loading = true
      getJurisdictionList(this.pagination, { keyword: this.keyword }).then(response => {
        this.loading = false
        this.tableData = get(response, 'data.data.records', [])
        this.pagination.total = get(response, 'data.data.total', 0)
        //获取已选择权限
        getPowers(this.id).then(res => {
          this.Selectioned = get(res, 'data.data', [])
          this.$nextTick(() => {
            // if (that.$refs.multipleTable) {
            //     that.$refs.multipleTable.clearSelection();
            // }
            console.log('tableData', this.tableData)
            console.log('Selectioned', this.Selectioned)
            this.tableData.forEach(row => {
              for (let j in this.Selectioned) {
                if (row.id == this.Selectioned[j].id) {
                  this.$refs.multipleTable.toggleRowSelection(row, true)
                  break
                }
              }
            })
          })
        })
      })
    },
    // 复选框
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // getRowKeys(row) {
    //   return row.id
    // },
    handleConfirm() {
      this.multipleSelection.map(item => ({
        powerId: item.id,
        powerName: item.powerName,
      }))
      this.$emit('childFn', this.multipleSelection)
      this.closeDialog()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getTableData()
    },
    handleReset() {
      this.keyword = ''
      this.getTableData()
    },
  },
}
</script>
